<template>
  <div>
    <!-- dialogVisible控制弹框的显示隐藏 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="clearForm"
    >
      <!-- 内容区域 -->
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="goodsForm"
        label-width="100px"
        class="demo-goodsForm"
      >
        <!-- 类目选择 -->
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="innerVisible = true"
            >类目选择</el-button
          >
          <span style="margin-left: 10px">{{ goodsForm.category }}</span>
        </el-form-item>
        <!-- 添加商品的信息 -->
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="goodsForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="goodsForm.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="innerVisibleImg = true"
            >上传图片</el-button
          >
          <img
            :src="goodsForm.image"
            height="150px"
            style="margin-left: 10px"
            alt=""
          />
        </el-form-item>
        <el-form-item label="商品描述" prop="descs">
          <WangEditor ref="myEditor" @sendWangEditor="sendWangEditor" />
        </el-form-item>
      </el-form>
      <!-- 外弹框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>

      <!-- //内弹框  --类目选择 -->
      <el-dialog
        width="40%"
        title="类目选择"
        :visible.sync="innerVisible"
        append-to-body
      >
        <TreeGoods @sendTreeData="sendTreeData" />
        <!-- 内弹框底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="showTreeData">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 内弹框 --上传图片 -->
      <el-dialog
        width="40%"
        title="上传图片"
        :visible.sync="innerVisibleImg"
        append-to-body
      >
        <Uploadtupian @sendImg="sendImg" />
        <!-- 内弹框底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisibleImg = false">取 消</el-button>
          <el-button type="primary" @click="showImg">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from "./TreeGoods.vue";
import Uploadtupian from "./Uploadtupian.vue";
import WangEditor from "./WangEditor.vue";
export default {
  props: {
    title: {
      type: String,
      default: "添加商品",
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  mounted() {
    console.log("生命周期-----");
    this.goodsForm = this.rowData;
  },
  components: {
    TreeGoods,
    Uploadtupian,
    WangEditor,
  },
  //   props: ['dialogVisible'],
  data() {
    return {
      imgUrl: "",
      treeData: {}, //接收tree数据
      dialogVisible: false, //控制内弹框
      innerVisible: false, //控制内弹框
      innerVisibleImg: false, //控制图片
      goodsForm: {
        //表单容器
        id: "",
        title: "",
        price: "",
        sellPoint: "",
        image: "",
        num: "",
        descs: "",
        cid: "", //类目的id
        category: "", //商品类目
        date1: "", //发布时间
        date2: "", //选择时间
      },
      rules: {
        //校验规则
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        num: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          // { min:1, message: '商品数量至少为1', trigger: 'blur' }
        ],
      },
    };
  },
  watch: {
    rowData(value) {
      console.log("监听到了数据的变化", value);
      this.goodsForm = value;
      //设置富文本编译的数据内容
      this.$nextTick(() => {
        this.$refs.myEditor.editor.txt.html(value.descs);
      });
    },
  },
  methods: {
    //sendWangEditor数据 接收富文本
    sendWangEditor(value) {
      // console.log(value);
      this.goodsForm.descs = value;
    },
    //显示图片的地址
    sendImg(value) {
      console.log(value);
      this.imgUrl = value;
    },
    //显示图片 --确认按钮
    showImg() {
      this.innerVisibleImg = false;
      this.goodsForm.image = this.imgUrl;
    },
    //确定的时候显示数据
    showTreeData() {
      this.innerVisible = false;
      //显示tree数据
      this.goodsForm.category = this.treeData.name;
      this.goodsForm.cid = this.treeData.cid;
    },
    //接收tree类目数据
    sendTreeData(value) {
      // console.log('tree数据',value);
      this.treeData = value;
    },
    // 自定义事件，通知父亲修改变量dialogVisble
    // close() {
    //   this.$emit('changeDialog');
    // },
    open() {
      this.dialogVisible = true;
    },
    // 添加|编辑数据
    submitForm() {
      this.$refs.goodsForm.validate((valid) => {
        if (valid) {
          console.log("可以获取输入的信息", this.goodsForm);
          // title cid  category sellPoint price num descs paramsInfo image
          let {
            title,
            cid,
            category,
            sellPoint,
            price,
            num,
            descs,
            image,
            id,
          } = this.goodsForm;
          //先判断按钮类型 ：添加商品  编辑商品
          if (this.title === "添加商品") {
            this.$api
              .getAddGoods({
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
              })
              .then((res) => {
                console.log("添加--实现", res.data);
                if (res.data.status == 200) {
                  //成功
                  this.$parent.getHttp(1); //更新父组件的列表数据
                  this.$message({
                    message: "恭喜你,添加商品成功",
                    type: "success",
                  });
                  //清空表单
                  this.clearForm();
                } else {
                  this.$message.error("错了哦，这是一条错误消息");
                }
              });
          } else {
            console.log("编辑商品");
            this.$api
              .getUpdateGoods({
                id,
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
              })
              .then((res) => {
                // console.log(res.data);
                if (res.data.status === 200) {
                  //成功
                  this.$parent.getHttp(1); //更新父组件的列表数据
                  this.$message({
                    message: "恭喜你,修改商品成功",
                    type: "success",
                  });
                  //清空表单
                  this.clearForm();
                } else {
                  this.$message.error("错了哦，这是一条错误消息");
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //清空表单数据列表
    clearForm() {
      this.dialogVisible = false; // 关闭弹框
      //清空表单 使用element 里面重置表单 然后手动初始化goodsForm
      // this.$refs.goodsForm.resetFields();
      (this.goodsForm = {
        //表单容器
        title: "",
        price: "",
        sellPoint: "",
        image: "",
        num: "",
        descs: "",
        cid: "", //类目的id
        category: "", //商品类目
        date1: "", //发布时间
        date2: "", //选择时间
      }),
        //清空编译器
        this.$refs.myEditor.editor.txt.clear(); //清空
    },
  },
};
</script>

<style lang="less" scoped>
.line {
  text-align: center;
}
</style>